<template lang="">
  <div>
    <el-table :data="DispatchOrderList" stripe style="width: 100%" border>
      <el-table-column prop="field_name" label="派单顺序"> </el-table-column>
      <el-table-column prop="color" label="是否展示"> 
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.is_show"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
            @change="switch_change(scope.row.is_show, scope.row.id)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="字体大小"> 
        <template slot-scope="scope">
          <!-- <el-input type='number'  v-model="scope.row.size"  @input="size_input(scope.row.size,scope.row.id,)"></el-input> -->
          <el-input-number v-model="scope.row.size" :step="1" :max="3" :min="1" @blur="size_input(scope.row.size,scope.row.id)"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  getInvoicesList,
  setInvoicesSort,
  setInvoicesValue,
} from "@/api/product/index";
export default {
  data() {
    return {
      pagination: {
        per_page: 10,
        page: 1,
      },
      oldIndex: null,
      newIndex: null,
      total: 0,
      DispatchOrderList: [],
      col: [
        { label: "派单顺序", prop: "field_name" },
        { label: "是否展示", prop: "is_show" },
        { label: "字体大小", prop: "size" },
        { label: "排序", prop: "sort" },
      ],
      sort_arr: [],
      loading: true,
    };
  },
  mounted() {
    this.get_DispatchOrderList();
  },
  methods: {
    size_change(val,id){
        console.log(val)
        let prms = {
        id,
        field: "size",
        value: val,
      };
        setInvoicesValue(prms).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.get_DispatchOrderList();
        }
      });
    },
    size_input(val,id){
      console.log(val)
      if(val>3){
        this.$message.error("请填写正确的倍数：1，2，3");
        let DispatchOrderList=this.DispatchOrderList
        DispatchOrderList.forEach(item=>{
          if(item.id==id){
              item.size==1
          } 
        })
        this.DispatchOrderList=DispatchOrderList
        return false
      }else{
        this.size_change(val,id)
      }
    },
    switch_change(val, id) {
      let prms = {
        id,
        field: "is_show",
        value: val,
      };
      setInvoicesValue(prms).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.get_DispatchOrderList();
        }
      });
    },
    get_DispatchOrderList() {
      this.sort_arr = [];
      getInvoicesList(this.pagination).then((res) => {
        if (res.code == 200) {
          this.DispatchOrderList = res.data;
          this.loading = false;
          this.DispatchOrderList.forEach((item) => {
            let obj = {
              id: item.id,
              sort: item.sort,
            };
            this.sort_arr.push(obj);
          });
        }
      });
      console.log(this.sort_arr);
    },
    set_DispatchOrder(arr) {
      this.loading = true;
      setInvoicesSort({
        sort_arr: arr,
      }).then((res) => {
        if (res.code == 200) {
          this.loading = false;
          this.get_DispatchOrderList();
        }
      });
    },
  },
};
</script>
<style scoped>
.el-table >>> .el-table__body-wrapper tbody {
  cursor: move;
}
.el-table >>> .warning-row {
  background: #1168b9 !important;
  color: #fff !important;
}
</style>
